$(window).on("load", function() {

	waterfall(); //瀑布流方法

	//模拟从服务端获取的json图片数据
	var dataInt = {
		'data': [{
			'src': 'P_01.jpg'
		}, {
			'src': 'P_02.jpg'
		}, {
			'src': 'P_03.jpg'
		}, {
			'src': 'P_04.jpg'
		}, {
			'src': 'P_05.jpg'
		}, {
			'src': 'P_06.jpg'
		}, {
			'src': 'P_07.jpg'
		}, {
			'src': 'P_08.jpg'
		}]
	};
	window.onscroll = function() {

		var $aPin = $("#main>div");
		var lastPinH = $aPin.last().get(0).offsetTop; //获取最后一张图片的高度

		//判断加不加图片
		if (checkscrollside() && lastPinH < 5100) {

			//变量json里面的data数据
			$.each(dataInt.data, function(index, value) {

				var $onBox = $('<div>').addClass('box').appendTo($("#main"));
				var $onPic = $('<div>').addClass('pic').appendTo($onBox);
				$('<img>').attr('src', './images/' + $(value).attr('src')).appendTo($onPic);
			});
			waterfall();
		};
	}

});

//瀑布流
function waterfall() {
	var $boxs = $("#main>div"); //获取所有的boxs
	var w = $boxs.eq(0).outerWidth(); //获取div的宽度
	var cols = Math.floor($(window).width() / w); //获取列数
	$('#main').width(w * cols).css('margin', '0 auto'); //设置宽度
	var hArr = []; //存放高度的数组
	$boxs.each(function(index, value) {
		var h = $boxs.eq(index).outerHeight(); //获取高度
		//前一列的数据
		if (index < cols) {
			hArr[index] = h;
		} else {

			var minH = Math.min.apply(null, hArr); //获取最小高度
			var minHIndex = $.inArray(minH, hArr); //获取坐标

			//将下一张图片放在最小高度的图片低下
			$(value).css({
				'position': 'absolute',
				'top': minH + 'px',
				'left': minHIndex * w + 'px'

			});

			hArr[minHIndex] += $boxs.eq(index).outerHeight(); //改变高度
		}
	});
}

//判断是否加载下一页
function checkscrollside() {
	var $aPin = $("#main>div");
	//创建【触发添加块框函数waterfall()】的高度：最后一个块框的距离网页顶部+自身高的一半(实现未滚到底就开始加载)
	var lastPinH = $aPin.last().get(0).offsetTop + Math.floor($aPin.last().height() / 2);
	//滚动的高度
	var scrollTop = $(window).scrollTop();
	//页面高度
	var documentH = $(document).width();
	//到达指定高度后 返回true，触发waterfall()函数
	return (lastPinH < scrollTop + documentH) ? true : false;
}